<template>
  <div class="admin_workorder">
    <div class="admin_workorder_search">
      <el-form :inline="true" :model="workOrderSearch" class="demo-form-inline">
        <el-form-item>
          <el-date-picker
            v-model="workOrderSearch.dateTime"
            type="date"
            placeholder="日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="workOrderSearch.type"
            placeholder="类型"
            width="50"
          >
            <el-option label="工单号" value="id"></el-option>
            <el-option label="联系电话" value="telephone"></el-option>
            <el-option label="收件人" value="name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="workOrderSearch.key"
            placeholder="关键词"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchWorkOrderNumberHandle"
            >查询</el-button
          >
          <el-button @click.native.prevent="refreshData()">
            <div class="el-icon-refresh"></div>
            刷新数据
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      style="width: 100%"
      max-height="550"
      min-height="550"
      v-loading="loading"
      :select-all="selectAllHandle"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" fixed="left" sortable label="ID" width="120">
      </el-table-column>
      <el-table-column prop="createTime" sortable label="创建时间" width="120">
      </el-table-column>
      <el-table-column prop="expectTime" sortable label="预期时间" width="120">
      </el-table-column>
      <el-table-column
        prop="completeTime"
        sortable
        label="完成时间"
        width="120"
      >
      </el-table-column>
      <el-table-column label="工单">
        <el-table-column prop="orderID" label="工单ID" width="120">
        </el-table-column>
        <el-table-column
          prop="orderType"
          :formatter="orderTypeFormatter"
          label="工单类型"
        >
        </el-table-column>
        <el-table-column
          prop="orderStatus"
          :formatter="orderStatusFormatter"
          sortable
          width="100"
          label="工单状态"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column label="收件人">
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column label="收件地址">
          <el-table-column prop="province" label="省份"> </el-table-column>
          <el-table-column prop="city" label="市区"> </el-table-column>
          <el-table-column prop="address" label="地址" width="180">
          </el-table-column>
        </el-table-column>
        <el-table-column prop="telephone" label="联系电话" width="100">
        </el-table-column>
      </el-table-column>
      <el-table-column prop="demandContent" label="需求" width="200">
      </el-table-column>
      <el-table-column prop="count" label="数量"> </el-table-column>
      <el-table-column prop="annex" label="附件">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="viewAnnexRow(scope.$index, tableData)"
            type="text"
            size="small"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <div class="under_review" v-if="scope.row.examine === 'INIT'">
            审核中
          </div>
          <el-button
            @click.native.prevent="examineRow(scope.$index, tableData)"
            type="text"
            size="small"
            v-if="scope.row.examine === 'INIT'"
          >
            审核
          </el-button>
          <div class="faild" v-else-if="scope.row.examine === 'FAILD'">
            审核失败
          </div>
          <div class="success" v-else>审核通过</div>
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small"
          >
            移除
          </el-button>
          <el-button
            @click.native.prevent="editSelectedRow(scope.$index, tableData)"
            type="text"
            size="small"
            v-if="scope.row.examine === 'FAILD'"
          >
            编辑
          </el-button>
          <el-button
            @click.native.prevent="execRow(scope.$index, tableData)"
            type="text"
            size="small"
            v-if="scope.row.examine === 'SUCCESS'"
          >
            执行
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-size="10"
      :pager-count="11"
      layout="prev, pager, next"
      :total="pagesTotal"
      :current-page="currentPage"
      @current-change="currentPageChangeHandle"
    >
    </el-pagination>
    <div class="admin_workorder_footer">
      <el-button @click="selectedAll">全选</el-button>
      <el-button @click="cancelSelectedAll">取消全选</el-button>
      <el-button @click="deleteSelectedRows">移除选中项</el-button>
      <el-button @click="execSelectedRows">执行选中项</el-button>
    </div>
  </div>
</template>
<script>
import eventHub from "../../plugins/eventHub";
export default {
  data() {
    return {
      tableData: [],
      loading: false,
      selectRows: [],
      pagesTotal: 10000,
      currentPage: 1,
      workOrderSearch: {
        dateTime: new Date(),
        key: "",
        type: "",
      },
    };
  },
  created() {
    this.getPageData();
  },
  methods: {
    refreshData() {
      this.currentPage = 1;
      this.getPageData(this.currentPage);
    },
    searchWorkOrderNumberHandle() {
      if (this.workOrderSearch.key === "") {
        this.$message("关键词不能为空");
        return;
      }
      if (this.workOrderSearch.type === "") {
        this.$message("类型不能为空");
        return;
      }
      this.currentPage = 1;
      this.getPageData(this.currentPage, { ...this.workOrderSearch });
    },
    editSelectedRow(index, rows) {
      console.log(this.$parent);
      eventHub.$emit("addTabHandle", {
        router: "/editWorkOrder?id=" + rows[index].id,
        title: "编辑工单-" + rows[index].id,
        data: rows[index],
      });
    },
    orderTypeFormatter(row) {
      return row.orderType === "PRINT" ? "打印" : "其他";
    },
    orderStatusFormatter(row) {
      return row.orderStatus === "SUCCESS" ? "完成" : "进行中";
    },
    currentPageChangeHandle(v) {
      console.log(v);
      this.currentPage = v;
      this.getPageData(this.currentPage);
    },
    filterItems(name, arrs) {
      let result = [];
      arrs.forEach((arr) => {
        result.push(arr.id);
      });
      return result;
    },
    deleteSelectedRows() {
      if (this.selectRows.length <= 0) {
        this.$message("未选中工单");
        return;
      }
      let that = this;
      this.$confirm("此操作将永久移除该工单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        that.loading = true;
        let ids = that.filterItems("id", that.selectRows);
        that.$order
          .deleteSelectedOrders({ rows: ids })
          /* that.$store
          .dispatch("deleteSelectedRows", { rows: ids }) */
          .then(() => {
            //that.tableData = v.data;
            that.$message("移除成功");
          })
          .catch((v) => {
            console.log(v);
            that.$message(v.message || "Error");
          })
          .finally(() => {
            that.timeout = clearTimeout(that.timeout);
            that.timeout = setTimeout(
              () => ((that.loading = false), (this.currentPage = 1)),
              500
            );
          });
      });
    },
    selectedAll() {
      this.$refs.multipleTable.toggleAllSelection();
    },
    cancelSelectedAll() {
      this.$refs.multipleTable.clearSelection();
      this.selectRows.length = 0;
    },
    selectAllHandle(v) {
      this.selectRows = v;
    },
    examineRow(index, rows) {
      let that = this;
      this.$confirm("审核是否通过该工单?", "提示", {
        confirmButtonText: "通过",
        cancelButtonText: "不通过",
        distinguishCancelAndClose: true,
        type: "warning",
      })
        .then(() => {
          that.loading = true;
          that.$order
            .examineSelectedOrders({
              rows: [rows[index].id],
              value: true,
            })
            /* that.$store
            .dispatch("examineSelectedRows", {
              rows: [rows[index].id],
              value: true,
            }) */
            .then(() => {
              //that.tableData = v.data;
              that.$message("提交成功");
            })
            .catch((v) => {
              console.log(v);
              that.$message(v.message || "Error");
            })
            .finally(() => {
              that.timeout = clearTimeout(that.timeout);
              that.timeout = setTimeout(() => (that.loading = false), 500);
            });
        })
        .catch((action) => {
          console.log(action);
          if (action === "cancel") {
            that.loading = true;
            that.$order
              .examineSelectedOrders({
                rows: [rows[index].id],
                value: false,
              })
              /* that.$store
              .dispatch("examineSelectedRows", {
                rows: [rows[index].id],
                value: false,
              }) */
              .then(() => {
                //that.tableData = v.data;
                that.$message("提交成功");
              })
              .catch((v) => {
                console.log(v);
                that.$message(v.message || "Error");
              })
              .finally(() => {
                that.timeout = clearTimeout(that.timeout);
                that.timeout = setTimeout(() => (that.loading = false), 500);
              });
          }
        });
    },
    execSelectedRows() {
      if (this.selectRows.length <= 0) {
        this.$message("未选中工单");
        return;
      }
      let that = this;
      this.$confirm("此操作将执行该工单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        that.loading = true;
        let ids = that.filterItems("id", that.selectRows);
        that.$order
          .execSelectedOrders({ rows: ids })
          /* that.$store
          .dispatch("execSelectedRows", { rows: ids }) */
          .then(() => {
            //that.tableData = v.data;
            that.$message("执行成功");
          })
          .catch((v) => {
            console.log(v);
            that.$message(v.message || "Error");
          })
          .finally(() => {
            that.timeout = clearTimeout(that.timeout);
            that.timeout = setTimeout(() => (that.loading = false), 500);
          });
      });
    },
    execRow(index, rows) {
      let that = this;
      this.$confirm("此操作将执行该工单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        that.loading = true;
        that.$order
          .execSelectedOrders({ rows: [rows[index].id] })
          /*  that.$store
          .dispatch("execSelectedRows", { rows: [rows[index].id] }) */
          .then(() => {
            //that.tableData = v.data;
            that.$message("执行成功");
          })
          .catch((v) => {
            console.log(v);
            that.$message(v.message || "Error");
          })
          .finally(() => {
            that.timeout = clearTimeout(that.timeout);
            that.timeout = setTimeout(() => (that.loading = false), 500);
          });
      });
    },
    viewAnnexRow(index, rows) {
      let row = rows[index];
      console.log(row);
    },
    deleteRow(index, rows) {
      this.selectRows = [rows[index]];
      let that = this;
      this.$confirm("此操作将永久移除该工单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        that.loading = true;
        let ids = that.filterItems("id", that.selectRows);
        that.$order
          .deleteSelectedOrders({ rows: ids })
          /* that.$store
          .dispatch("deleteSelectedRows", { rows: ids }) */
          .then(() => {
            //that.tableData = v.data;
            that.$message("移除成功");
          })
          .catch((v) => {
            console.log(v);
            that.$message(v.message || "Error");
          })
          .finally(() => {
            that.timeout = clearTimeout(that.timeout);
            that.timeout = setTimeout(
              () => ((that.loading = false), (this.currentPage = 1)),
              500
            );
          });
      });

      //      rows.splice(index, 1);
    },
    getPageData(v, filter) {
      let that = this;
      this.loading = true;
      this.$order
        .getWorkOrderList({ pn: v || 1, filter: filter })
        /* this.$store
        .dispatch("getWorkOrderList", { pn: v || 1, filter: filter }) */
        .then((v) => {
          that.tableData = v.data;
        })
        .catch((v) => {
          console.log(v);
          that.$message(v.message || "Error");
        })
        .finally(() => {
          that.timeout = clearTimeout(that.timeout);
          that.timeout = setTimeout(() => (that.loading = false), 500);
        });
    },
  },
};
</script>
<style lang="less">
.admin_workorder {
  .admin_workorder_search {
    padding: 0;
    margin: 0;
    font-size: 12px;
  }
  .el-pagination {
    text-align: center;
    padding: 10px 0;
    font-weight: 400;
  }
  .admin_workorder_footer {
    border-top: 1px #efefef solid;
    padding: 10px 0;
  }
  .el-table td,
  .el-table th {
    padding: 5px 0;
  }
  .el-table .cell {
    font-size: 12px;
    .faild {
      color: red;
    }
    .under_review {
      color: #ccc;
    }
  }
}
</style>
